/**
 * @author Mike
 * @date 2017/04/27
 * @desc 母版页
 */

import React from 'react';
import { Layout, Menu, Icon } from 'antd';

import Header from '../../compontens/Header';
import SideBar from '../../compontens/SideBar';
import Nav from '../../compontens/Nav';
import Footer from '../../compontens/Footer';

const { Sider, Content } = Layout;
const { SubMenu } = Menu;

export default class Main extends React.Component {
  constructor () {
    super();
    this.state = { collapsed: false,
                   mode: 'inline'
                 };
  }

  onCollapse (collapsed) {
    this.setState({
        collapsed,
        mode: collapsed ? 'vertical' : 'inline'
    });
  }

  render () {
    return (
      <Layout id="components-layout-trigger">
       <Sider collapsible  collapsed={ this.state.collapsed } onCollapse={ this.onCollapse.bind(this) }>
         <div className="logo" />
         <SideBar mode={ this.state.mode } />
        </Sider>
      <Layout>
          <Header />
          <Content style={{ margin: '0 16px' }}>
           <Nav />
           <div style={{ padding: 24, background: '#fff', minHeight: 1000 }}>
             { this.props.children }
           </div>
          </Content>
          <Footer />
      </Layout>
      </Layout>
    )
  }
}  